@import './_mixin';
@import './_reset.scss';
@import './ver';

.nav_bar {
    @include Type;
    height: 38px;
    display: flex;
    margin-top: 20px;
    z-index: 8777;
    background-color: white;
   position: sticky;
    top: 0;


    >.nav_bar_classify {
        display: block;
        width: 200px;
        background-color: orange;
        border-radius: 10px 10px 0 0;

        line-height: 38px;
        color: white;
        box-sizing: border-box;
        padding-left: 15px;
    }

    >.nav_bar_center {
        width: 795px;
        display: flex;

        >li {
            width: 85px;
            display: flex;
            @include CenTer;
            position: relative;
            color: $subject_color;

            >a {
                &:hover {
                    color: $font_hover;

                    &:after {
                        content: " ";
                        display: block;
                        width: 30px;
                        height: 2px;
                        background: $font-hover;
                        border-radius: 3px 3px 0 0;
                        overflow: hidden;
                        margin: 0 auto;
                    }
                }

            }

        }
    }

    >.nav_bar_publicity {
        display: block;
        width: 196px;
        background-color: #333;
        color: orange;
        text-align: center;
        line-height: 38px;
        font-size: 12px;
        border-radius: 10px 10px 0 0;
    }
}